<template>
  <div>
    <div
      id="main"
      style="display: flex;  height: 40vh; width: 40vw; margin-left: 10%;"
    ></div>
  </div>
</template>
<script lang="ts" setup>
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
import { positionSalary } from "../api/function";
import type { positionSalaryType } from "../api/function";
type EChartsOption = echarts.EChartsOption;

const salryData = ref<number[]>([]);
const positionData = ref<string[]>([]);
let myChart: echarts.ECharts | null = null;

const getPositionSalaryList = async () => {
  const res = await positionSalary();
  console.log("排行榜数据", res.data);
  for (let i = 0; i < res.data.length; ++i) {
    salryData.value = res.data.map((item: positionSalaryType) => item.salary);
    positionData.value = res.data.map((item: positionSalaryType) => item.position);
  }
  // console.log(salryData.value);
  // console.log(positionData.value);

  if (myChart) {
    myChart.setOption({
      yAxis: {
        data: positionData.value,
      },
      series: [
        {
          data: salryData.value,
        },
      ],
    });
  }
};

const option: EChartsOption = {
  xAxis: {
    show: false,
    max:'dataMax',
  },
  yAxis: {
    type: "category",
    data: positionData.value,
    inverse: true,
    animationDuration: 300,
    animationDurationUpdate: 300,
    animationEasing: "linear",
    axisTick: {
        show: false
    },
    axisLine: {
        show: false
    },
  },
  series: [
    {
      realtimeSort: true,
      name: "全国高薪岗位平均月薪排名Top10 (单位：元)",
      type: "bar",
      data: salryData.value,
      barWidth: 20,     
      label: {
        show: true,
        position: "right",
        valueAnimation: true,
      },
      animationDuration: 2000, // 初始动画的持续时间，单位为毫秒
      animationEasing: "linear", // 初始动画的缓动效果，其他效果包括linear、quadraticIn等
      animationDelay: function (idx) {
        // 初始动画的延迟时间
        // 每个柱图增加100ms的延迟
        return idx * 100;
      },

      itemStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            { offset: 0, color: "#e6e6fd" },
            { offset: 0.1, color: "#8384f5" },
            { offset: 0.3, color: "#6a6bf2" },
            { offset: 1, color: "#1f21ec" },
          ],
        },
      },
    },
  ],
  legend: {
    show: true,
    left: "left",
    top: 15,
    textStyle: {
      color: "#b8b4b4",
    },
  },
  animationDuration: 3000,
  animationDurationUpdate: 3000,
  animationEasing: "linear",
  animationEasingUpdate: "linear",
  textStyle:{
    color:'#b8b4b4'
  }
};

onMounted(() => {
  const chartDom = document.getElementById("main");
  if (chartDom) {
    myChart = echarts.init(chartDom);
    myChart.setOption(option);
    window.addEventListener("resize", () => {
      myChart?.resize();
    });
  }
  getPositionSalaryList();
});
</script>
